<!--
 * @Author: your name
 * @Date: 2021-07-05 17:41:02
 * @LastEditTime: 2021-07-09 09:43:51
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \平原新区应急管理\src\components\enfore\echarts\statepie.vue
-->
<template>
  <!-- 案件统计 -->
  <div style="width:100%;height:100%" id="statepie"></div>
</template>

<script>
// import * as echarts from 'echarts'
export default {
  name: 'statepie',
  data() {
    return {
      chart: null,
      ongoing: [],
      waitDo: [],
      done: []
    }
  },
  mounted() {
    // this.setOption()
  },
  methods: {
    setOption(Data) {
      var myChart = this.$echarts.init(document.getElementById('statepie'))
      myChart.setOption({
        tooltip: {
          trigger: 'item',
          borderColor: '#fff',
          backgroundColor: 'rgba(255,255,255,0.8)',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          orient: 'horizontal',
          right: '13%',
          bottom: '50%',
          width: '200px',
          height: '50px',
          itemGap: 30
        },
        series: [
          {
            name: '占比',
            type: 'pie',
            top: 10,
            radius: [50, 65],
            left: 10,
            center: ['25%', '50%'],
            data: Data,
            animationEasing: 'cubicInOut',
            animationDuration: 1600,
            itemStyle: {
              normal: {
                color: function(params) {
                  //自定义颜色
                  var colorList = ['#D789FF', '#FF8C8C', '#6CE6DF']
                  return colorList[params.dataIndex]
                }
              }
            }
          }
        ]
      })
      //多图表自适应
      //   window.addEventListener('resize', function() {
      //     myChart.resize()
      //   })
    }
  }
}
</script>
